
<template>
  <!-- <div>加上setup 可以直接在script 中打印数据</div> -->
  <h3>当前鼠标的位置:</h3>
  <div>X: {{ mouse.x }}</div>
  <div>Y: {{ mouse.y }}</div>
  <div>当前点击的次数: {{ count }}</div>
  <button @click="add">点击</button>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
const count = ref(0)
const add = () => {
  count.value++
}
const mouse = reactive({
  x: 0,
  y: 0,
})
const move = (e) => {
  mouse.x = e.pageX
  mouse.y = e.pageY
}
onMounted(() => {
  document.addEventListener('mousemove', move)
})
onUnmounted(() => {
  document.removeEventListener('mousemove', move)
})
</script>
<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>
